<template>
  <view class="moment-detail">
    <u-navbar :title="moment.author"  left-icon="arrow-left" @leftClick="goBack"></u-navbar>
    
    <view class="content">
      <text>{{moment.content}}</text> 
      
      <u-grid v-if="moment.images.length  > 0" col="3">
        <u-grid-item v-for="(img, index) in moment.images"  :key="index">
          <u-image :src="img" width="100%" height="200rpx" mode="aspectFill" @click="previewImage(index)"></u-image>
        </u-grid-item>
      </u-grid>
      
      <view class="meta">
        <text>{{moment.createTime}}</text> 
        <view class="actions">
          <u-icon name="thumb-up" size="20" :color="liked ? '#2979ff' : '#606266'" @click="toggleLike"></u-icon>
          <text>{{moment.likes  + (liked ? 1 : 0)}}</text>
          <u-icon name="chat" size="20" color="#606266"></u-icon>
          <text>{{moment.comments.length}}</text> 
        </view>
      </view>
    </view>
    
    <view class="comments">
      <u-section title="评论" :right="false"></u-section>
      
      <view class="comment-list">
        <view v-for="comment in moment.comments"  :key="comment.id"  class="comment-item">
          <text class="author">{{comment.author}}:  </text>
          <text>{{comment.content}}</text> 
        </view>
      </view>
      
      <view class="comment-input">
        <u-input v-model="commentContent" placeholder="写下你的评论..."></u-input>
        <u-button size="mini" @click="addComment">发送</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      moment: {},
      liked: false,
      commentContent: ''
    }
  },
  onLoad(options) {
    // 根据id获取日志详情
    this.loadMomentDetail(options.id) 
  },
  methods: {
    async loadMomentDetail(id) {
      // 这里应该是API请求，示例中使用模拟数据
      this.moment  = {
        id: 1,
        content: '今天天气真好，出去走走',
        images: [],
        author: '张三',
        createTime: '2023-05-15 14:30',
        likes: 5,
        comments: [
          { id: 1, author: '李四', content: '看起来不错' },
          { id: 2, author: '王五', content: '下次一起啊' }
        ]
      }
    },
    goBack() {
      uni.navigateBack() 
    },
    previewImage(index) {
      uni.previewImage({ 
        current: this.moment.images[index], 
        urls: this.moment.images 
      })
    },
    toggleLike() {
      this.liked  = !this.liked 
    },
    addComment() {
      if (!this.commentContent.trim())  return
      
      this.moment.comments.push({ 
        id: Date.now(), 
        author: '当前用户',
        content: this.commentContent 
      })
      this.commentContent  = ''
    }
  }
}
</script>